<template>
  <div id='Radiolist'>
    <h3>电台排行榜</h3>
    <ul>
      <li v-for='djRadio in djRadios' :key='djRadio.id'>
        <img :src='`${djRadio.intervenePicUrl}?param=120y120`' />
        <div>
          <h4>{{ djRadio.name }}</h4>
          <p><i class='el-icon-user-solid'></i>{{ djRadio.dj.nickname }}</p>
          <span>共{{ djRadio.programCount }}期</span><span>订阅{{ djRadio.subCount }}次</span>
        </div>
      </li>
    </ul>

    <el-pagination
      v-if='total>0'
      background
      layout='prev, pager, next'
      :total='total'
      @current-change='handleCurrentChange'
      :current-page='pageNo'
      :page-size='limit+3'
      style='text-align: center'>
    </el-pagination>
  </div>
</template>

<script>
export default {
  name: 'Radiolist',
  data() {
    return {
      cateId: undefined,
      pageNo: 1,
      limit: 19, //不知道为什么limit是19但是返回22条数据，非常离谱
      djRadios: [],
      total: 0,
    }
  },
  mounted() {
    this.cateId = this.$route.query.cateId
    this.getList()
  },
  methods: {
    async getList() {
      const { pageNo, cateId, limit } = this
      let offset = (pageNo - 1) * limit
      let result = await this.$API.djRadioHot({ cateId, limit, offset })
      if (result.data.code === 200) {
        this.djRadios = result.data.djRadios
        this.total = result.data.count
      }
    },
    handleCurrentChange(curPage) {
      this.pageNo = curPage
      this.getList()
    },
  },
  watch: {
    '$route'(newVal) {
      this.cateId = newVal.query.cateId
      this.getList()
    },
  },
}
</script>

<style scoped lang='less'>
#Radiolist {
  ul {
    display: flex;
    flex-flow: row wrap;
    justify-content: start;

    li {
      margin-right: 20px;
      flex: 45%;
      border-bottom: #cccccc 1px solid;
      display: flex;
      padding: 15px;
      box-sizing: border-box;

      div {
        margin: 20px;
        font-size: 12px;

        h4 {
          font-size: 18px;
        }

        p {
          margin: 15px 0 10px 0;
        }

        span {
          margin: 0 12px 0 0;
          color: #8c939d;
        }
      }
    }
  }
}


h3 {
  font-size: 24px;
  border-bottom: 2px #C20C0C solid;
  padding: 0 0 10px 0;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}
</style>